<template>
  <div class="Home-box">
    <!-- 顶部导航栏 -->
    <div class="HeadBox">
      <span class="headTitle">项目流程追踪管理系统</span>
      <div class="selectBox">
        <div class="touxiang"></div>
        <el-select
          v-model="bumenItem"
          placeholder="Select"
          size="medium"
          style="width: 240px"
        >
          <el-option
            v-for="item in bumenList"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </div>
    </div>
    <div class="HomeContent-box">
      <!-- 侧边菜单 -->
      <div class="sidebar-box">
        <el-menu
          :default-active="route.path"
          class="Menu-box"
          router
          @open="handleOpen"
          @close="handleClose"
        >
          <el-menu-item index="/projectList">
            <div
              class="liebiao"
              :class="route.path == '/projectList' ? 'liebiaoAct' : ''"
            ></div>
            <span>项目列表</span>
          </el-menu-item>
          <el-menu-item index="/projectnoticeBoard">
            <div
              class="kanban"
              :class="route.path == '/projectnoticeBoard' ? 'kanbanAct' : ''"
            ></div>
            <span>项目看板</span>
          </el-menu-item>
          <el-menu-item index="/PersonnelManagement">
            <div
              class="renyuan"
              :class="route.path == '/PersonnelManagement' ? 'renyuanAct' : ''"
            ></div>
            <span>人员管理 </span>
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 内容 -->
      <div class="routePage-box">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue"
import { useRoute, useRouter } from "vue-router"
import { ArrowDown } from "@element-plus/icons-vue"
// 得到 router 对象
const route = useRoute()
onMounted(() => {
  console.log(route.path)
})
const bumenList = ref([
  {
    name: "前端组",
    id: 1
  },
  {
    name: "后端组",
    id: 2
  },
  {
    name: "名将",
    id: 3
  },
  {
    name: "综管部",
    id: 4
  }
])
const bumenItem = ref("")
watch(
  () => route.path,
  (val) => {
    console.log(val)
  },
  {
    deep: true,
    default: true
  }
)
</script>

<style lang="less" scoped>
.Home-box {
  width: 100%;
  height: 100%;
  .HeadBox {
    width: 100%;
    height: 5%;
    box-sizing: border-box;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.0871);
    .headTitle {
      font-size: 26px;
      font-weight: 600;
      line-height: 56px;
      margin-left: 15px;
    }
    .selectBox {
      width: 300px;
      height: 60%;
      display: flex;
      align-items: center;
      border-left: 1px solid #ebebeb;
      // background-color: red;
      .touxiang {
        margin-left: 20px;
        width: 20px;
        height: 20px;
        background: url("@/assets/renyuanguanli/bumentouxiang.png") no-repeat
          center;
        background-size: 100% 100%;
      }
      /deep/.el-select__wrapper {
        margin-left: 5px;
        width: 150px;
        box-shadow: 0 0 0 0 var(--el-border-color) inset;
      }
    }
  }
  .HomeContent-box {
    width: 100%;
    height: 95%;
    display: flex;
    .sidebar-box {
      width: 12.5%;
      height: 100%;
    }
    .routePage-box {
      width: 87.5%;
      height: 100%;
      box-sizing: border-box;
    }
    .renyuan {
      margin-top: -2px;
      margin-right: 10px;
      width: 15px;
      height: 13px;
      background: url("@/assets/sidebar/renyuan.png") no-repeat center;
      background-size: 100% 100%;
    }
    .renyuanAct {
      margin-top: -2px;
      margin-right: 10px;
      width: 15px;
      height: 13px;
      background: url("@/assets/sidebar/renyuanAct.png") no-repeat center;
      background-size: 100% 100%;
    }
    .kanban {
      margin-top: -2px;
      margin-right: 10px;
      width: 15px;
      height: 13px;
      background: url("@/assets/sidebar/kanban.png") no-repeat center;
      background-size: 100% 100%;
    }
    .kanbanAct {
      margin-top: -2px;
      margin-right: 10px;
      width: 15px;
      height: 13px;
      background: url("@/assets/sidebar/kanbanAct.png") no-repeat center;
      background-size: 100% 100%;
    }
    .liebiao {
      margin-top: -2px;
      margin-right: 10px;
      width: 15px;
      height: 13px;
      background: url("@/assets/sidebar/liebiao.png") no-repeat center;
      background-size: 100% 100%;
    }
    .liebiaoAct {
      margin-top: -2px;
      margin-right: 10px;
      width: 15px;
      height: 13px;
      background: url("@/assets/sidebar/liebiaoAct.png") no-repeat center;
      background-size: 100% 100%;
    }
  }
  .Menu-box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255);
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.0782);
  }
  .el-menu-item.is-active {
    color: rgba(255, 178, 0);
    background-color: rgba(255, 251, 242);
  }
}
</style>
